<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>jQuery.intercept</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.intercept.js"></script>
	<script type="text/javascript">
		$(function(){
			var $summary = $('span.summary');			
			
			$('body')
				.intercept('click',{
					'*':function(){
						$summary.text('unregistered element clicked');	
					},
					'tr,td':function(e){
						var text = e.target.nodeName == 'TD' ? 'td clicked!' : 'tr#'+e.target.id+' clicked!';
						$summary.text(text);
					},
					table:function(){
						$summary.text('table#'+this.id+' clicked!');	
					},
					'a.regular':function( e ){
						$summary.text('link clicked!');
						e.preventDefault();
					}
				})
				.intercept('click',{
					'p,div':function( e ){
						$summary.text( e.target.nodeName.toLowerCase() + ' ' + e.type +'ed!');
					},
					self:function(){
						$summary.text('body clicked');	
					}
				})
				.intercept('click',{
					ul:function( event ){
						$summary.text('getting closer to the downloads!');
					},
					li:function(){
						$summary.text('almost there! download me');	
					},
					'a:not(.regular)':function(e){
						$summary.text('thanks for downloading "'+e.target.href+'"');
					}
				});
		});
	</script>
	<style type="text/css">
		.selected{
			background-color:darkorange;
		}
		.focused{
			background-color:#00CC66;
		}
		#container{
			padding-left:10px;
			width:500px;
			border:1px solid darkgray;
		}
			#container span{
				margin: 10px 0;
				border:1px black solid;
			}
		table{
			float:left;
			margin:10px;
			cursor:pointer;
		}
		table,tr,td{
			padding:2px;
		}
		div.clear{
			clear:left;
		}
		div.download{
			margin-top:20px;
			border:1px black solid;
			width:200px;
		}
	</style>
</head>
<body>
	<div id="container">
		<span class="summary">A summary will appear here, unless you stop the bubbling</span>
		<table id="table1" border="1">
			<tr id="row1">
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr id="row2">
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr id="row3">
				<td><a class="regular" href="#">Link</a></td>
				<td>Cell</td>
			</tr>
		</table>
		
		<table id="table2" border="1">
			<tr id="row4">
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr id="row5">
				<td><a class="regular" href="#">Link</a></td>
				<td>Cell</td>
			</tr>
			<tr id="row6">
				<td>Cell</td>
				<td>Cell</td>
			</tr>
		</table>
		
		<table id="table3" border="1">
			<tr id="row5">
				<td>Cell</td>
				<td><a class="regular" href="#">Link</a></td>
			</tr>
			<tr id="row6">
				<td>Cell</td>
				<td>Cell</td>
			</tr>
			<tr id="row7">
				<td>Cell</td>
				<td>Cell</td>
			</tr>
		</table>		
		<div class="clear" />
	</div>
	<div class="download">
		Download
		<ul>
			<li><a href="jquery.intercept.1.0.2.html" target="_blank">Example</a></li>
			<li><a href="jquery.intercept.1.0.2.rar" target="_blank">RAR with all the files</a></li>
		</ul>
	</div>
</body>
</html>
